<template>
  <div>
    <!-- 底部导航栏 -->
    <tabber></tabber>

    <van-list v-model="loading" :finished="finished" finished-text="我是有底线的" @load="onLoad" :immediate-check="false">

      <!-- li -->
      <van-cell v-for="data in datalist" :key="data.filmId" @click="handleClick(data.filmId)">
        <section>

          <!-- 左边图片 -->
          <div class="left"><img :src="data.poster"></div>

          <!-- 中间内容信息 -->
          <a class="center">
            <div>
              <span class="name">{{ data.name }}</span>
              <span class="item">{{ data.filmType.name }}</span>
            </div>
            <p style="white-space:nowrap;text-overflow:ellipsis;overflow:hidden;">主演：{{ data.actors | datafilter }}</p>
            <p>上映日期：{{ data.premiereAt }}</p>
          </a>

          <!-- 右边购票按钮 -->
          <div class="right"><div>预约</div></div>

        </section>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import tabber from '@/components/Tabber.vue'
import http from '@/util/http.js'
import Vue from 'vue'
import { mapState } from 'vuex'
import { List, Cell } from 'vant'

Vue.use(List).use(Cell)

Vue.filter('datafilter', (data) => {
  if (data === undefined) return '暂无主演'
  return data.map(item => item.name).join(' ')
})

export default {
  // 把tabber注册成局部组件
  components: {
    tabber
  },
  data () {
    return {
      isShow: false,
      datalist: [],
      loading: false, // 是否正在加载中，到底之后，这个值该为了true。这是为了防止多次触发
      finished: false,
      current: 1, // 记录第几页数据
      total: 0 // 总数据长度
    }
  },
  computed: {
    ...mapState('CityModule', ['cityId'])
  },
  mounted () {
    http({
      method: 'get',
      url: `/gateway?cityId=${this.cityId}&pageNum=1&pageSize=10&type=2&k=1193275`,
      headers: {
        'X-Host': 'mall.film-ticket.film.list'
      }
    }).then(res => {
      console.log(res.data.data)
      this.datalist = res.data.data.films
      this.total = res.data.data.total
    })
  },
  methods: {
    onLoad () {
      // 有一个bug。如果点击进入详情页面，滚动里面的内容，出来的时候，会导致懒加载失效，并且格子移位
      // 已经出现滚动条的情况下，返回上一个页面中，会导致上一个页面立即出发onLoad事件
      // 这里的onLoad事件，无非也是基于window.onscroll的监听
      // 不过不进行长度的判断，长度=0的情况下，直接把finished的状态修改为true，就不会触发懒加载了
      // 解决方案：再判断数组的长度不等于0的情况下
      if (this.datalist.length === this.total && this.datalist.length !== 0) {
        this.finished = true
        return
      }

      this.current += 1

      // 1.ajax请求新页面的数据
      http({
        method: 'get',
        url: `/gateway?cityId=${this.cityId}&pageNum=${this.current}&pageSize=10&type=2&k=1193275`,
        headers: {
          'X-Host': 'mall.film-ticket.film.list'
        }
      }).then(res => {
        // 2.合并新数据到老数据
        this.datalist = [...this.datalist, ...res.data.data.films]

        // 3.让loading赋值为false
        this.loading = false
      })
    },
    handleClick (id) {
      // query传参方式
      this.$router.push(`/detail?id=${id}`)
    }
  }
}
</script>

<style lang="scss" scoped>
  .van-cell {
    position: relative;
    background-color: #fff;
    height: 124px;
  }
  .left {
    position: absolute;
    left: 0;
    width: 66px;
  }
  .left img {
    border-radius: 3px;
    width: 66px;
  }
  .center {
    position: absolute;
    left: 66px;
    right: 50px;
    height: 94px;
    margin-left: 10px;
    font-size: 13px;
    color: #797d82;
    padding: 15px 10px 0 0;
  }
  .right {
    position: absolute;
    right: 0;
    width: 50px;
    height: 94px;
  }
  .right div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 23px;
    border: 1px solid #ffb232;
    color: #ffb232;
    text-align: center;
    line-height: 23px;
  }
  .name {
    color: #191a1b;
    font-size: 16px;
    height: 22px;
    line-height: 22px;
    margin-right: 10px;
  }
  .item {
    font-size: 9px;
    color: #fff;
    background-color: #d2d6dc;
    height: 14px;
    line-height: 14px;
    padding: 0 2px;
    border-radius: 2px;
  }
</style>
